<template>
  <view class="popup-container" @click="close" v-show="show">
    <image :class="['popup-main', {hide: isHide}]" :src="staticImgs.bg" v-show="show" />
    <view :class="['popup-main', {hide: isHide}]" :style="{zIndex: 9999}" v-show="show">
      <view class="popup-inner" @click.stop>
        <view class="popup-title">欢迎尊敬的用户</view>
        <view class="popup-subtitle">Hi {{getUserInfo.nickName}}，</view>
        <view class="popup-subtitle">您已成为测评vip用户</view>
        <view class="popup-date">到期日：{{member.memberEndTimeStr}}</view>
        <view class="popup-content">
          <view style="white-space: nowrap;">全场测评现在都可以任意测试了</view>
          <view>（包含将来更新的测评哟）</view>
        </view>
        <view class="submit-btn-row flex-cc">
          <button class="submit-btn flex-cc" @click.stop="close">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState} from 'vuex'

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      staticImgs: {
        bg: this.imgBaseURL + '/scl/member/member_popup.png'
      },
      isHide: true,
      lock: true
    }
  },
  computed: {
    ...mapState({
      member: state => state.user.member
    })
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.show = val
        if (val) {
          // 只弹一次
          uni.clearStorageSync('showMemberModal')
          this.isHide = true
          this.lock = true
          this.$nextTick(() => {
            this.isHide = false
            setTimeout(() => {
              this.lock = false
            }, 500)
          })
        } else {
          this.isHide = true
        }
      }
    }
  },
  methods: {
    close() {
      if (this.lock) {
        return
      }
      this.isHide = true
      this.show = false
      this.$emit('input', false)
    }
  }
}
</script>

<style scoped lang="scss">
.popup-container {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: rgba(50, 50, 50, 0.7);
}

.popup-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 770rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  z-index: 2;
  transition: transform 0.3s linear;
  transform: translateY(0);

  &.hide {
    transform: translateY(-1300rpx);
  }
}

.popup-inner {
  margin-top: 142rpx;
  width: 530rpx;
  height: 630rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 60rpx;
  box-sizing: border-box;
}

.popup-title {
  font-weight: bold;
  font-size: 40rpx;
  color: #7D4810;
  line-height: 56rpx;
  margin-bottom: 24rpx;
  margin-top: 50rpx;
}

.popup-subtitle {
  font-weight: bold;
  font-size: 36rpx;
  color: #7D4810;
  line-height: 50rpx;
}

.popup-date {
  font-size: 24rpx;
  color: #A35B0F;
  line-height: 33rpx;
  margin-top: 8rpx;
}

.popup-content {
  font-weight: bold;
  font-size: 30rpx;
  color: #FFF;
  line-height: 60rpx;
  margin-top: 92rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.submit-btn-row {
  width: 100%;
}

.submit-btn {
  width: 320rpx;
  height: 86rpx;
  background-image: linear-gradient(90deg, #D39741 0%, #713C1A 100%);
  border-radius: 43rpx;
  font-weight: bold;
  font-size: 34rpx;
  color: #FFF;
  line-height: 48rpx;
}
</style>